@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;700;800&family=Russo+One&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
	--ff-main: 'Nunito', sans-serif;
	--ff-heading: 'Russo One', sans-serif;

	/*Colors*/
	--bg-clr-main: #1e1e1e;
	--bg-clr-secondary: #2b2b2b;
	--text-clr-main: #ccd7f7;
	--text-clr-secondary: #8891b0;
	--accent-clr: #08fcd8;
	--red-accent: #df506e;

	/*Font sizes*/
	--fs-lg: 2rem; /*32px*/
	--fs-md: 1.5rem; /*24px*/
	--fs-main: 1.125rem; /*18px*/
	--fs-sm: 1rem; /*16px*/
	--fs-xs: 0.875rem; /*14px*/

	/*gap*/
	--gap-sm: 0.5rem; /*8px*/
	--gap-md: 1rem; /*16px*/
	--gap-lg: 1.25rem; /*20px*/
	--gap-xl: 1.5rem; /*24px*/
	--gap-xxl: 2rem; /*32px*/
	--gap-xxxl: 3rem; /*48px*/
	--gap-60: 3.75rem; /*60px*/
	--gap-100: 6.25rem; /*100px*/
	--gap-160: 10rem; /*160px*/

	/*decorations*/
	--box-shadow: 0 10px 30px -15px rgba(0, 0, 0, 0.25);
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	scroll-behavior: smooth;
	cursor: none;

}

body {
	min-height: 100vh;
	font-family: var(--ff-main);
	font-size: var(--ff-main);
	background-color: var(--bg-clr-main);
	color: var(--text-clr-main);
	overflow-x: hidden;
}

.container {
	width: 100%;
	max-width: 1470px;
	padding: 0 var(--gap-md);
	margin-inline: auto;
}
.title {
	font-family: var(--ff-heading);
	color: var(--accent-clr);
	font-size: var(--fs-lg);
	text-transform: capitalize;
}
@media (max-width: 768px) {
	.container {
		max-width: 57.5rem;
	}
}

@media (max-width: 420px) {
	.container {
		max-width: 25rem;
		padding: 0 var(--gap-sm);
	}
}
